<!--
 * @Description: 新增维修项目一级
 * @Autor: 何兴家
 * @Date: 2020-11-17 16:10:23
 * @LastEditors: 何兴家
 * @LastEditTime: 2021-01-27 19:01:28
-->
<template>
  <div>
    <FormPanel ref="form" :list="formList" :cols="2" :labelWidth="100" :isSubmitBtn="false"></FormPanel>
    <div class="btnWrap">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleComfirm">确定</el-button>
    </div>

    <!-- 维修项目选择 -->
    <BaseDialog :visible.sync="showRepairLabourSelect" title="新增维修项目" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <selectRepairLabour :modelId="modelId" @onConfirm="handleRepartLabourAddConfirm" @close="showRepairLabourSelect = false" />
    </BaseDialog>
  </div>
</template>

<script>
import selectRepairLabour from './selectRepairLabour';

export default {
  props: ['modelId'],
  components: { selectRepairLabour },
  data() {
    return {
      formList: this.createFormList(),
      showRepairLabourSelect: false, // 是否显示维修项目选择弹窗
      selectedRepairLabour: {} // 选中的维修项目
    };
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'RADIO',
          label: '',
          itemList: [
            { text: '保养', value: '1' },
            { text: '维修', value: '0' }
          ],
          selfCols: 2
        },
        {
          type: 'INPUT',
          label: '维修项目代码',
          fieldName: 'LABOUR_CODE',
          initialValue: '',
          unitRender: () => {
            return (
              <el-button
                icon="el-icon-search"
                onClick={() => {
                  this.showRepairLabourSelect = true;
                }}
              />
            );
          },
          rules: [{ required: true, message: '请维护项目代码', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '维修项目名称',
          fieldName: 'LABOUR_NAME',
          initialValue: '',
          rules: [{ required: true, message: '请维护项目名称', trigger: 'blur' }]
        },
        {
          type: 'INPUT_NUMBER',
          label: '标准工时',
          fieldName: 'STD_LABOUR_HOUR',
          precision: 2,
          initialValue: '',
          rules: [{ required: true, message: '请维护标准工时', trigger: 'blur' }]
        },
        {
          type: 'INPUT_NUMBER',
          label: '工时费',
          fieldName: 'LABOUR_AMOUNT',
          precision: 2,
          initialValue: '',
          rules: [{ required: true, message: '请维护工时费', trigger: 'blur' }]
        }
      ];
    },
    // 新增维修项目带回事件
    handleRepartLabourAddConfirm(e) {
      console.log(e);
      this.formList.forEach(item => {
        item.initialValue = e[item.fieldName];
      });
      this.selectedRepairLabour = e;
    },
    // 点击确定
    async handleComfirm() {
      let formData = await this.$refs.form.GET_FORM_DATA();
      if (formData[0]) return;
      // 拼接项目数据并计算工时单价
      let labourData = { ...this.selectedRepairLabour, ...formData[1] };
      labourData.LABOUR_PRICE = labourData.STD_LABOUR_HOUR == 0 ? 0 : (labourData.LABOUR_AMOUNT / labourData.STD_LABOUR_HOUR).toFixed(2);
      delete labourData.ITEM_ID;
      this.$emit('onConfirm', labourData);
    },
    // 点击取消
    handleCancel() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
